/* ==========================================================================
   Admisión 2026 — estilos propios de la plantilla (maqueta Figma "Home Admisión 2027")
   Este archivo se carga DESPUÉS de css/duoc-theme-v1.4/custom.css y reutiliza
   a propósito las mismas clases que ya existían en admision2026.php para no
   tener que tocar el CSS global del sitio.
   ========================================================================== */

.container {
    padding: 0 !important;
}

.containerAdmision2026,
.containerAdmision2026 * {
    box-sizing: border-box;
}

/* ---- Utilidad de sección: fondo ancho completo + contenido centrado 1300px --- */

.ad26-section {
    width: 100%;
}

.ad26-section-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 70px;
}

.ad26-title {
    font-family: Lato, sans-serif;
    font-weight: 700;
    font-size: 31.25px;
    line-height: 1.2;
    letter-spacing: -0.4688px;
    color: #1a1a1a;
    text-transform: none;
    margin: 0 0 20px 0;
}

/* ==========================================================================
   BANNER SUPERIOR
   ========================================================================== */

.banneradmision2026 {
    position: static !important;
    top: auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.banneradmision2026 .static-banner {
    position: relative;
    overflow: hidden;
}

.banneradmision2026 .wrapper-on-top-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding-left: 80px;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.banneradmision2026 .wrapper-on-top-image a {
    pointer-events: auto;
}

.banneradmision2026 img {
    display: block;
    object-fit: cover !important;
    width: 100% !important;
}

/* Desktop: la altura fija (658px, igual a la maqueta) se define solo desde este
   breakpoint hacia arriba para no pelear con las reglas mobile ya existentes en
   custom.css (.static-banner img.first-slide{height:430px!important} a <1024px),
   que de otro modo dejaban la foto más baja que el contenedor y el texto caía
   sobre un vacío blanco ("lavado"). */
@media (min-width: 1025px) {
    .banneradmision2026 img {
        height: 658px !important;
    }
}

.banneradmision2026 h1 {
    width: 45%;
    font-family: Lato, sans-serif !important;
    margin-top: 0;
}

.banneradmision2026 h4 {
    color: #fff;
    width: 45%;
    font-family: Lato, sans-serif !important;
    font-weight: 600;
}

/* ==========================================================================
   CONTENEDOR GENERAL + MENÚ (ya no se superponen al banner)
   ========================================================================== */

.containerAdmision2026 {
    padding: 0 !important;
}

.containerAdmision2026.content-container {
    position: static !important;
    top: auto !important;
}

.menu-admision2026 {
    background: #000;
    z-index: 20;
    top: auto;
    position: static;
    padding: 16px 70px;
    font-size: 16px;
}

.menu-admision2026 a {
    color: #fff;
    font-family: Lato, sans-serif !important;
}

/* ==========================================================================
   SECCIÓN: "Una formación conectada con la industria" (card preinscripción)
   ========================================================================== */

.ad26-hero-secundaria {
    background: #fff;
}

.containerAdmision2026 .preinscripcion.card {
    max-width: 1300px;
    margin: 0 auto;
    border: none;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    padding: 0;
}

.containerAdmision2026 .preinscripcion .col-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    background: #fff;
    color: #1a1a1a;
    width: 680px !important;
    max-width: 100%;
    flex: none;
    padding: 40px !important;
}

.containerAdmision2026 .preinscripcion h3 {
    color: #1a1a1a;
    font-family: Lato, sans-serif;
    font-size: 31.25px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    margin: 0;
}

.containerAdmision2026 .preinscripcion .col-text p {
    font-size: 16px !important;
    line-height: 1.5;
    margin: 0;
}

.containerAdmision2026 .preinscripcion .card-img {
    height: 100%;
    min-height: 332px;
    object-fit: cover;
    border-radius: 0;
}

/* ==========================================================================
   BOTONES (pill amarilla, sin flecha) — reutilizado en toda la página
   ========================================================================== */

.containerAdmision2026 .btn-primary,
.banneradmision2026 .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffb800 !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 100px !important;
    padding: 14px 25px !important;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
}

.containerAdmision2026 .btn-primary::after,
.importante .btn-primary::after {
    content: none !important;
}

/* ==========================================================================
   SECCIÓN: Fechas Clave del Proceso ([timeline_eventos])
   ========================================================================== */

.ad26-fechas-clave {
    background: #fff;
}

.ad26-fechas-clave #timeline-wrapper {
    margin: 0 !important;
    max-width: 1300px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ==========================================================================
   SECCIÓN: Carreras nuevas ([carrusel_carreras])
   ========================================================================== */

.ad26-carreras-nuevas {
    background: #fffae0;
}

/* Nodo 196:12324 (maqueta mobile): el amarillo de fondo es un poco más
   oscuro/saturado que en desktop. */
@media (max-width: 768px) {
    .ad26-carreras-nuevas {
        background: #fff6cc;
    }
}

.ad26-carreras-nuevas .titulo-carrusel-container {
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   SECCIÓN: Simulador de Financiamiento y Beneficios ([duoc_simulador])
   ========================================================================== */

.ad26-simulador {
    background: #f4f4f4;
}

.ad26-simulador .ad26-section-inner {
    padding: 70px;
}

/* La maqueta (nodo 37:8788) fija el formulario a 469px y el panel de
   estimación a 455px, cada uno con su propio scroll interno — el simulador
   completo no debe expandirse mostrando todo el formulario de una vez.
   El plugin por defecto usa position:sticky en el panel lateral (para que
   "siga" el scroll de la página); acá lo desactivamos y lo cambiamos por
   scroll interno, solo dentro de esta sección. */
#simulador-financiamiento .dsb-form-card {
    height: 469px;
    overflow-y: auto;
}

#simulador-financiamiento .dsb-side {
    position: static;
    top: auto;
    height: 455px;
    overflow-y: auto;
    align-self: flex-start;
}

/* Nodo 319:16623 (maqueta mobile): en mobile cada paso del formulario
   ("1 Información personal y de contacto", "2 Información sobre la
   carrera...") es desplegable — arranca colapsado mostrando solo el
   encabezado con una flecha, y se abre al tocarlo (ver el <script> agregado
   junto al shortcode en admision2026.php, que le agrega/saca la clase
   "ad26-open"). En desktop esto no aplica: todos los pasos se ven siempre
   abiertos, como ya funcionaba. */
@media (max-width: 900px) {
    #simulador-financiamiento .dsb-section-head {
        cursor: pointer;
        position: relative;
        padding-right: 30px;
        width: 100%;
    }

    #simulador-financiamiento .dsb-section-head::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 18px;
        height: 18px;
        transform: translateY(-50%);
        background-color: #ffb800;
        -webkit-mask-image: url(/wp-content/plugins/duoc-simulador-beneficios/assets/img/chevron-down.svg);
        mask-image: url(/wp-content/plugins/duoc-simulador-beneficios/assets/img/chevron-down.svg);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        transition: transform 0.2s;
    }

    #simulador-financiamiento .dsb-section.ad26-open .dsb-section-head::after {
        transform: translateY(-50%) rotate(180deg);
    }

    #simulador-financiamiento .dsb-section:not(.ad26-open)>*:not(.dsb-section-head) {
        display: none;
    }
}

/* ==========================================================================
   SECCIÓN: Financiamiento — imagen + 2 cards (Preguntas frecuentes / Otras vías)
   ========================================================================== */

/* Nodo 244:14811: sección de fondo #f4f4f4 (662px alto), con una foto de
   397px fija arriba y las 2 cards "flotando" encima de su parte inferior
   (se le monta -114px con margin-top negativo, así el look no depende de
   fijar alturas absolutas si el contenido de una card es más largo/corto).
   Dejamos ~70px de gris debajo de las cards antes de que empiece la
   siguiente sección, igual que en la maqueta. */
.importante {
    position: relative;
    left: 0;
    padding: 0 0 70px 0;
    background: #f4f4f4;
}

.importante .ad26-financiamiento-bg {
    position: relative;
    height: 397px;
    background-size: cover;
    background-position: center;
}

.importante .row {
    position: relative;
    max-width: 1300px;
    margin: -114px auto 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.importante .col-md-4,
.importante .col-md-6 {
    flex: 1 1 0;
    max-width: none;
    padding: 0 !important;
}

.importante .card {
    height: 100%;
    border-radius: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 20px;
    background: #fff;
}

.importante .icon-container {
    margin-top: 0;
    padding: 15.5px;
    border-radius: 50%;
    border: 1.5px solid #ffb800;
    display: flex;
}

.importante img {
    width: 39px;
    height: 39px;
}

.importante .card-body {
    padding: 0;
    width: 100%;
}

.importante h5 {
    text-align: left;
    font-family: Lato, sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    margin: 0 0 12px 0;
}

.importante p {
    text-align: left;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    height: auto;
    margin: 0;
}

.importante .btn-primary {
    width: auto;
    margin-top: 20px !important;
}

/* ==========================================================================
   SECCIÓN: Contacto (formulario / iframe)
   ========================================================================== */

.ad26-contacto {
    background: #fff;
}

.containerAdmision2026 .contacto-title {
    font-family: Lato, sans-serif;
    font-size: 31.25px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    padding: 0;
    margin: 0 0 10px 0;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto;
}

.ad26-contacto-subtitulo {
    font-family: Lato, sans-serif;
    font-size: 20px;
    color: #1a1a1a;
    max-width: 1300px;
    margin: 0 auto 30px auto;
}

.ad26-contacto #admision {
    max-width: 1300px;
    margin: 0 auto;
}

/* ==========================================================================
   SECCIÓN: Tours y Experiencias (antes "Tu Primer Paso")
   ========================================================================== */

.ad26-tours {
    background: #f4f4f4;
}

.ad26-tours-texto {
    font-family: Lato, sans-serif;
    font-size: 16px;
    color: #1a1a1a;
    max-width: 1300px;
    margin: 0 auto 40px auto;
}

.ad26-tours-grid {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: stretch;
}

.ad26-tours-lista {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ad26-tours-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 80px;
    padding: 20px 30px;
    border-bottom: 1px solid #a4a4a4;
    text-decoration: none;
    color: #1a1a1a;
    font-family: Lato, sans-serif;
    font-size: 20px;
    letter-spacing: -0.3px;
}

.ad26-tours-item:hover {
    background: #ececec;
    color: #1a1a1a;
}

.ad26-tours-item img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ad26-tours-imagen {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.ad26-tours-imagen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), rgba(102, 102, 102, 0.18));
}

/* ==========================================================================
   SECCIÓN: Dudas (email / whatsapp / teléfono)
   NOTA: "financiamiento-fuas.php" usa una clase "dudas fuas" propia para OTRA
   sección (dentro de los tabs de Financiamiento) que no tiene relación con
   esta. Por eso todo aquí se escribe como "#home > .dudas" (nuestra sección es
   hija directa de <main id="home">, la de FUAS no) para no pisarle el estilo.
   ========================================================================== */

#home>.dudas {
    background: #fff;
    padding: 70px;
}

#home>.dudas h2 {
    font-family: Lato, sans-serif;
    font-size: 31.25px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
    max-width: 1300px;
    margin: 0 auto 30px auto;
}

#home>.dudas .row {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

#home>.dudas .col-md-4 {
    flex: 1 1 0;
    max-width: none;
    padding: 0 !important;
}

/* El markup de esta card todavía trae las clases de Bootstrap
   "text-center d-flex align-items-center" (heredadas del diseño anterior),
   que en este tema se aplican con !important y le ganaban a nuestro CSS:
   por eso el ícono quedaba centrado en vez de alineado a la izquierda como
   en la maqueta. Se fuerza con !important para no depender de quién cargue
   después en la cascada. */
#home>.dudas .card {
    width: 100%;
    border-radius: 20px;
    padding: 30px;
    padding-top: 30px !important;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

#home>.dudas .icon-container {
    align-self: flex-start;
    margin-top: 0;
    padding: 10px;
}

#home>.dudas .icon-container img {
    width: 32px;
    height: 32px;
}

#home>.dudas .card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    flex: 1;
    width: 100%;
    padding: 0 !important;
}

#home>.dudas h5 {
    text-align: left !important;
    font-size: 25px;
    text-transform: none;
    margin-top: 15px;
    margin-bottom: 8px;
}

#home>.dudas .card-body p {
    text-align: left !important;
    flex: 1 0 auto;
    margin-bottom: 12px;
}

#home>.dudas a {
    text-decoration: underline;
    font-weight: 700;
    color: #1a1a1a;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {

    .ad26-section-inner,
    .menu-admision2026,
    #home>.dudas {
        padding: 40px 20px !important;
    }

    #home>.dudas .row {
        flex-direction: column;
    }

    /* Nodo 319:16703 (maqueta mobile): la foto mide 611px (no 260) y las
       cards arrancan a solo 131px de su borde superior, tapando casi todo
       el resto de la foto — de ahí el overlap tan grande (611-131=480px). */
    .importante {
        padding-bottom: 140px;
    }

    .importante .ad26-financiamiento-bg {
        height: 611px;
    }

    .importante .row {
        margin-top: -480px;
        padding: 0 20px;
        flex-direction: column;
        gap: 40px;
    }

    /* Nodo 196:12313 (maqueta mobile): el padding interno de la card baja
       de 40px (desktop) a 20px. */
    .containerAdmision2026 .preinscripcion .col-text,
    .containerAdmision2026 .preinscripcion .card-img {
        width: 100% !important;
    }

    .containerAdmision2026 .preinscripcion .col-text {
        padding: 20px !important;
    }

    .containerAdmision2026 .preinscripcion .row.no-gutters {
        flex-direction: column;
    }

    .ad26-tours-grid {
        flex-direction: column;
    }

    .ad26-tours-imagen {
        min-height: 260px;
    }
}

/* Simulador: en mobile la maqueta (nodo 319:16623) NO usa las cajas con
   scroll interno fijo — el formulario y la estimación fluyen uno debajo del
   otro en una sola columna, con el alto natural de su contenido. El plugin
   ya apila las columnas solo con "@media(max-width:900px)"; acá se anula
   el alto fijo + scroll que se le agregó para desktop en ese mismo rango. */
@media (max-width: 900px) {
    #simulador-financiamiento .dsb-form-card {
        height: auto;
        overflow-y: visible;
    }

    #simulador-financiamiento .dsb-side {
        height: auto;
        overflow-y: visible;
    }
}


/* max-width (no width fijo): con "width:1440px" a secas, esta sección se
   salía del viewport y se veía cortada en mobile/tablet — el ancho fijo
   solo debe limitar en pantallas grandes, no forzar 1440px en todas. */
#buscador-carreras {
    position: static;
    max-width: 1440px;
    margin: 0 auto;
    overflow: hidden;
}

/* Maqueta mobile (nodo 208:13956): la foto va PRIMERO y el panel
   (título + selects + botón) después, al revés del orden en el HTML
   (el panel es lo primero que trae el shortcode). Se reordena solo
   visualmente con "order" en el breakpoint donde el widget pasa a columna.
   Además el plugin deja ".bcm-widget{width:1440px}" fijo y su propio
   media query nunca lo baja de ahí — eso era lo que cortaba la sección a
   la derecha en mobile/tablet. */
@media (max-width: 900px) {
    #buscador-carreras .bcm-widget {
        width: 100%;
    }

    #buscador-carreras .bcm-imagen {
        order: -1;
    }
}